<script setup lang="ts">
  import { ref } from 'vue'
  import sendLogDetailService from '../service/sendLogDetail'
  import HStatus from '@/components/common/status/HStatus.vue'
  import HButton from '@/components/common/button/HButton.vue'
  import HModal from '@/components/common/Modal/HModal.vue'

  const { sendLogDetail, getSendLogDetailLoading, getSendLogDetailFn } = sendLogDetailService

  const props = defineProps({
    smsId: {
      type: String,
      required: true,
    },
  })

  // 弹窗状态
  const modalVisible = ref(false)

  // 显示弹窗
  const onShowModal = async () => {
    modalVisible.value = true
    await getSendLogDetailFn(props.smsId)
  }
</script>

<template>
  <div>
    <div style="display: inline-block" @click="onShowModal">
      <slot></slot>
    </div>

    <HModal title="短信详情" v-model="modalVisible">
      <div v-loading="getSendLogDetailLoading">
        <el-descriptions :column="1" v-if="sendLogDetail">
          <!-- 模版名称 -->
          <el-descriptions-item>
            <template #label>
              <div class="label">模版名称：</div>
            </template>
            <div>{{ sendLogDetail.name }}</div>
          </el-descriptions-item>

          <!-- 短信类型 -->
          <el-descriptions-item>
            <template #label>
              <div class="label">短信类型：</div>
            </template>
            <div>
              <span v-if="sendLogDetail.type === 1">验证类短信</span>
              <span v-else-if="sendLogDetail.type === 2">通知类</span>
              <span v-else>推广类短信</span>
            </div>
          </el-descriptions-item>

          <!-- 短信内容 -->
          <el-descriptions-item label="短信内容：">
            <template #label>
              <div class="label">短信内容：</div>
            </template>
            <div>{{ sendLogDetail.smsContent }}</div>
          </el-descriptions-item>

          <!-- 发送结果 -->
          <el-descriptions-item>
            <template #label>
              <div class="label">发送结果：</div>
            </template>
            <div>
              <HStatus type="success" v-if="sendLogDetail.success">
                <span style="font-size: 12px">发送成功</span>
              </HStatus>
              <HStatus type="error" v-else>
                <span style="font-size: 12px">发送失败</span>
              </HStatus>
            </div>
          </el-descriptions-item>

          <!-- 接受者手机号 -->
          <el-descriptions-item>
            <template #label>
              <div class="label">接收者手机号：</div>
            </template>
            <div>
              {{ sendLogDetail.receiveUserPhone }}
            </div>
          </el-descriptions-item>

          <!-- 发送失败原因 -->
          <el-descriptions-item label="发送失败原因：">
            <template #label>
              <div class="label">发送失败原因：</div>
            </template>
            <div>
              {{ sendLogDetail.failtReason }}
            </div>
          </el-descriptions-item>
        </el-descriptions>
      </div>

      <template #footerRight>
        <HButton is-modal @click="modalVisible = false">关闭</HButton>
      </template>
    </HModal>
  </div>
</template>

<style scoped lang="scss">
  :deep(.el-descriptions__cell) {
    display: flex;
  }

  .label {
    white-space: nowrap;
    text-align: right;
    width: 100px;
  }
</style>
